/**
 * 学习目标：
 * 1. 使用Switch解决重复匹配的问题
 * 2. 配合Switch设置404页面
 *
 */
import React, { Component } from 'react';

import { HashRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom';
import './index.css';

export default class App extends Component {
  render() {
    return (
      <Router>
        <div>App组件</div>
        <div>
          <NavLink to="/home" activeClassName="my-active">
            跳到Home
          </NavLink>
          <br />
          <a href="#/home">点我调到Home</a>
          <br />
          <NavLink to="/my" activeClassName="my-active" exact>
            跳到我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend" activeClassName="my-active" exact>
            跳到朋友
          </NavLink>
        </div>
        {/* 👍 使用<Switch></Switch>包住Route组件，表示匹配到一次就停止继续匹配 */}
        <Switch>
          <Route path="/" component={MyMusic} exact />
          <Route path="/home" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/home" component={Home} />
          <Route path="/my" component={MyMusic} />
          <Route path="/friend" component={Friend} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    );
  }
}

class NotFound extends React.Component {
  render() {
    return (
      <div>
        <h1>404页面</h1>
      </div>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Home组件</h1>
      </div>
    );
  }
}

class MyMusic extends React.Component {
  render() {
    return (
      <div>
        <h1>我是MyMusic组件</h1>
      </div>
    );
  }
}

class Friend extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Friend组件</h1>
      </div>
    );
  }
}
